<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
    <title>Document</title>
    <style>
        html{
            width: 100%;
            height: 100%;
            position: relative;
            background-color: #dedded;
        }
        .form{
            width: 250px;
            height: 188px;
            background-color: #f0f8f0;
            box-shadow: 0px 0px 10px 0px;
            border: 1px solid #DDEEF6;
            border-radius: 6px;
            position: absolute;
            left: 50%;
            top: 30%;
            transform: translate(-50%, -50%);
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <div class="form">
        <p>
            <label>用户名</label>
            <input type="text" id="username">
        <p>
            <label>密&nbsp; &nbsp;码</label>
            <input type="password" id="password">
        </p>
        <button class="btn btn-primary" type="submit">登录</button>
    </div>

    <div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
            Hello, world! This is a toast message.
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.js"></script>
    <script src="../js/utils.js"></script>
    <script>
        const username = document.querySelector('#username')
        const password = document.querySelector('#password')
        const loginBtn = document.querySelector('.btn btn-primary')
        loginBtn.onclick=function(){
            const vUsername = username.value.trim()
            const vPassword = password.value.trim()
            if(vUsername.length===0){
                username.classList.remove('btn btn-success')
                username.classList.add('btn btn-warning')
                 // 提示请输入用户名
                return  //错误都可以提前跳出
            }else{
                username.classList.remove('btn btn-warning')
            }
            // 如果密码错误
            if(vPassword.length===0){
                username.classList.remove('btn btn-success')
                username.classList.add('btn btn-warning')
                 // 提示请输入用户名
            }else{
                username.classList.remove('btn btn-warning')
            }

            const data = await request({
                url:'http://localhost:3000/api/login',
                data:{
                    username:_username,
                    password:_password
                }
            })
            if(data.code === 200){
                // 把用户信息存入本地存储
                localStorage.setItem('userInfo',JSON.stringify(data.data))

                // 登录成功后跳转到用户中心
                location.href = 'mine.html'
            }else{
                var toast = new bootstrap.Toast(document.querySelector('#liveToast'))
                toast.show()
            }
        }


    </script>
</body>

</html>